<template>
    <view class="container">
        <tabs
            :current="current"
            @change="handleChange"
            height="100"
            bar-width="60"
            :is-scroll="false"
        >
            <tab
                v-for="(commentItem, commentIndex) in tabList"
                :key="commentIndex"
                :name="commentItem.name"
            >
                <view class="list">
                    <z-paging
                        ref="paging"
                        v-if="current == commentIndex"
                        v-model="commentItem.list"
                        :auto="current == commentIndex"
                        :data-key="commentIndex"
                        @query="queryList"
                        :fixed="false"
                        height="100%"
                    >
                        <template v-if="current == 0">
                            <wait :list="commentItem.list"></wait>
                        </template>
                        <template v-if="current == 1">
                            <already :list="commentItem.list"></already>
                        </template>
                    </z-paging>
                </view>
            </tab>
        </tabs>
    </view>
</template>

<script lang="ts" setup>
import { ref, shallowRef, onMounted, nextTick } from 'vue'
import { apiEvaluateLists, apiCommentCount } from '@/api/user'
import Wait from './components/wait.vue'
import Already from './components/already.vue'
import { MyEvaluateEnum } from '@/utils/enum'
import { onShow } from '@dcloudio/uni-app'

/** Data Start **/
const tabList: any = ref([
    {
        name: '待评价',
        type: MyEvaluateEnum.WAIT,
        list: []
    },
    {
        name: '已评价',
        type: MyEvaluateEnum.ALREADY,
        list: []
    }
])
const current = ref<number>(0)
// 下拉组件的Ref
const paging = shallowRef()
/** Data End **/

/** Methods Start **/
//改变tab
const handleChange = (index: number) => {
    current.value = Number(index)
}

//获取评价数量
const getCommentCount = async () => {
    const { noCommentsCount } = await apiCommentCount()
    tabList.value[0].name = `待评价(${noCommentsCount})`
}

const queryList = async (pageNo: any, pageSize: any) => {
    const index = current.value
    try {
        const { lists } = await apiEvaluateLists({ type: index, pageNo, pageSize })
        console.log(paging.value)
        paging.value[0].complete(lists)
    } catch (e) {
        paging.value[0].complete(false)
    }
}
/** Methods End **/
onShow(async () => {
    await nextTick()
    await getCommentCount()
    await paging.value[0].refresh()
})
</script>

<style lang="scss" scoped>
.list {
    height: calc(100vh - 50px - env(safe-area-inset-bottom));
}
</style>
